import { useState } from 'react'
//引入样式
import '../../../../css/design/design.scss'
function tabs({ children }: any) {
    const [activeTab, setActiveTab] = useState(children[0].props.label)

    const handleClick = (label: any) => {
        console.log('111111');
        setActiveTab(label)
    }

    return (
        <div className='tab-header'>
            <ul>
                {
                    children.map((item: any) => (
                        <li key={item.props.label} className={item.props.label === activeTab ? 'active' : ''}
                            onClick={() => handleClick(item.props.label)}>
                            {item.props.label}
                        </li>
                    ))
                }
            </ul>
            <div className='tab-content'>
                {
                    children.map((items: any) => {
                        if (items.props.label !== activeTab) return undefined
                        return items.props.children
                    })
                }
            </div>
        </div>
    )
}

export default tabs
